<!doctype html>

<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>图书管理系统</title>


    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">


    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Material Design Lite">


    <!-- Tile icon for Win8 (144x144 + tile color) -->

    <meta name="msapplication-TileColor" content="#3372DF">


    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
    <link rel="canonical" href="http://www.example.com/">
    -->

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.deep_purple-pink.min.css">
    <link rel="stylesheet" href="/static/css/styles.css">
    <link rel="stylesheet" href="/static/css/page5.css">
      <link rel="stylesheet" href="/static/css/iconfont.css">
      <link rel="stylesheet" href="/static/css/bootstrap.min.css">
      <style>
    #view-source {
      position: fixed;
      display: block;
      right: 0;
      bottom: 0;
      margin-right: 40px;
      margin-bottom: 40px;
      z-index: 900;
    }
    </style>
  </head>
  <body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base ">

    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
        <div class="mdl-layout--large-screen-only mdl-layout__header-row">
        </div>
        <div class="mdl-layout--large-screen-only mdl-layout__header-row">
          <h2>图书管理系统</h2>
        </div>
        <div class="mdl-layout--large-screen-only mdl-layout__header-row">
        </div>
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
          <a href="/" class="mdl-layout__tab ">首页</a>
          <a href="/page1" class="mdl-layout__tab">分类</a>
          <a href="/page2" class="mdl-layout__tab">搜索</a>
            <a href="/page3" class="mdl-layout__tab">我的</a>
          <a href="/page4" class="mdl-layout__tab">登录</a>
          <a href="/page5" class="mdl-layout__tab is-active" >注册</a>
          <button onclick="location.href='page2'" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent" id="add">

              <span class="material-icons">
                     search
                </span>
          </button>
        </div>
      </header>




       <div class="col-md-12 head">
      <div class="col-md-10 login_title col-md-offset-1">
        <h2>注册</h2>
      </div>
      <div class="input_login col-md-10 login_box col-md-offset-1" >
        <form class="form-horizontal">
          <div class="form-group" style="height: 70px">
            <div class="col-md-2 user col-md-offset-5 mdl-textfield mdl-js-textfield" style="padding:0 0 20px 0;">
              <p>请输入用户名:</p>
              <input
                type="text"
                class="mdl-textfield__input"
                placeholder="请输入："
                v-model="user_inf.us_name"
                  style="margin-bottom: 7px"
              />
                <label class="mdl-textfield__label" for="sample1"></label>
                <label class="mdl-textfield__label" for="sample1"></label>
            </div>
          </div>

          <div class="form-group" style="height: 70px">
            <div class="col-md-2 user col-md-offset-5 mdl-textfield mdl-js-textfield" style="padding:0 0 20px 0;">
         <p>请输入邮箱:</p>
              <input
                type="email"
                @keyup="errorF"
                class="mdl-textfield__input "
                 type="text" id="sample1"
                  placeholder="请输入："
                v-model="user_inf.email"
                  style="margin-bottom: 7px"
              />
                <label class="mdl-textfield__label" for="sample1"></label>
            </div>
          </div>
          <div class="form-group" style="height: 70px">
            <div class="col-md-2 user col-md-offset-5 mdl-textfield mdl-js-textfield" style="padding:0 0 20px 0;">
              <p>请输入密码:</p>
              <input
                type="password"
                @keyup="errorF"
                class="mdl-textfield__input"
                placeholder="请输入："
                v-model="user_inf.password_1"
                 style="margin-bottom: 7px"
              />
                <label class="mdl-textfield__label"></label>
            </div>
          </div>
          <div class="form-group" v-bind:class="error" style="height: 70px">
            <div class= "col-md-2 user col-md-offset-5 mdl-textfield mdl-js-textfield" :class="'isError'?'':'is-invalid'" style="padding:0 0 20px 0;">
              
              <p v-show="!isError">请再次输入密码：</p>
              <p v-show="isError">两次密码输入不一致</p>

              
              <input
                type="password"
                @keyup="errorF"
                class="mdl-textfield__input"

                placeholder="请输入："
                v-model="password_2"
                 style="margin-bottom: 7px"

              />
          <label class="mdl-textfield__label"></label>
            </div>
          </div>

          <div class="form-group" style="height: 70px;margin-bottom: 0">
            <div class="col-md-2 user col-md-offset-5" style="padding:0 ;">
              <label class="radio-inline">
                <input
                  type="radio"
                  value="学生"
                  name="inlineRadioOptions"
                  v-model="user_inf.picked"
                />
                学生
              </label>
              <label class="radio-inline">
                <input
                  type="radio"
                  value="教师"
                  v-model="user_inf.picked"
                  name="inlineRadioOptions"
                />
                教师
              </label>
            </div>
          </div>
          <div class="form-group " v-show="user_inf.picked==='教师'"  style="height: 40px;margin-bottom: 25px">
            <div class="col-md-2 user col-md-offset-5 mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="padding:0;">
              <p>请选择您的职称：</p>
                 <label class="mdl-textfield__label" style="transform: translateY(25px)"></label>
                <!-- style="padding:0;border: none;margin-bottom:20px;background-color: rgba(256,256,256,0);border-bottom: 1px solid rgba(0,0,0,.12);box-shadow: none"-->
              <select class="mdl-textfield__input" v-model="user_inf.job_title" id="octane" name="octane">
                <option value="1">讲师</option>
                <option value="2">助教</option>
                <option value="3">副教授以上</option>
              </select>

            </div>
          </div>

          <div class="form-group" style="height: 70px;padding-top: 15px">
            <div class="col-md-2 col-md-offset-5" style="padding:0 ;">
              <div class="login_b" style="float: right;" >
                <button
                  @click="registered"
                  type="button"
                  class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
                >
                  完成
                </button>
              </div>
              <div class="have">已有账号？去<a href="page4">登录</a></div>
            </div>
          </div>
        </form>

      </div>

    </div>
     <main class="mdl-layout__content">
     </main>
    </div>

    <a href="https://github.com/kongqiahaha/shizhan" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">查看源代码</a>
    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="/static/js/page5.js"></script>
  </body>
</html>